<template>
  <div>
    <!-- <div>
      <div class="left"  @click="back">
        <van-icon name="arrow-left"/>返回
      </div>
    </div> -->
    <img class="topImg" src="http://www.itcast.cn/2018czydz/images/gywmban.jpg" alt="">
    <!-- 黑马概况 -->
    <van-tabs v-model="activeName">
      <van-tab title="黑马概况" name="introduce">
        <div v-html="this.introduce"></div>
      </van-tab>
      <van-tab title="品牌理念" name="idea">
        <div v-html="this.idea"></div>
      </van-tab>
    </van-tabs>
    <!-- 分割线 -->
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }">联系电话</van-divider>
    <div :style="{ padding: '0 10px'}">电话: <span class="phone"><a href="tel:15830669915">400-168-9090</a></span> </div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }">校区位置</van-divider>
    <!-- 地图 -->
    <amap></amap>
  </div>
</template>

<script>
import amap from './amap/Amap.vue'

export default {
  data () {
    return {
      activeName: 'introduce',
      introduce: [],
      idea: []
    }
  },

  components: {
    amap
  },

  created () {
    this.getContact()
  },

  methods: {
    getContact () {
      const res = require('../../../public/heima.json')
      this.introduce = res.introduce
      this.idea = res.idea
    }
  }
}
</script>

<style scoped>
.topImg {
  width: 100%;
}

.phone {
  color: blue;
}

.van-tab {
  width: 100%;
  overflow: hidden;
}

.left {
  position: relative;
  margin-top: -40px;
  margin-left: 10px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
}

/* < icon */
.van-icon {
  top: 2px;
}
</style>
